<template>
  <div class="app-container" :class=$.role_setting_panel>
    <el-header style="height: auto">
      <el-form ref="form" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="辖区：">
              <el-select v-model="search.district" clearable onselect="return" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="道路类别：">
              <el-input v-model="search.type" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button @click="query(search)" >查询</el-button>
              <el-button type="danger" @click="handleCreate" >新增</el-button>
              <el-button class="filter-item" type="danger"  @click="exportTable ">导出</el-button>
              <!-- <el-button class="filter-item" type="warning"  @click="keyprocess">设置三查表</el-button> -->
            </el-form-item>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
              <el-form ref="form" :model="trafficDanger" label-width="130px" class="demo-ruleForm" style="margin-left:20px;text-align: center;">
                <el-row>
                  <el-form-item label="辖区：">
                    <el-select v-model="trafficDanger.district" clearable onselect="return" placeholder="全部">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <!-- <span style="margin-left:8.8%;"></span> -->
                  <el-form-item label="道路类别：">
                    <el-input v-model="trafficDanger.type" placeholder="请输入道路类别名称" />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="地点：">
                    <el-input type="textarea" :rows="2" v-model="trafficDanger.location" placeholder="请输入地点名称" />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="路段情况和事故状况：">
                    <el-input type="textarea" v-model="trafficDanger.section" placeholder="路段情况和事故状况" />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="线型：">
                    <el-input v-model="trafficDanger.linears" placeholder="请输入线型名称" />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span></span>
                  <el-form-item label="路名和公里桩：">
                    <el-input v-model="trafficDanger.roadName" placeholder="请输入路名和公里桩" />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span></span>
                  <el-form-item label="跟进责任民警：">
                    <el-select v-model="trafficDanger.followPolice" onselect="true">
                      <el-option v-for="item in role" :key="item.cNickname" :label="item.cNickname" :value="item.cNickname">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <span></span>
                  <el-form-item label="跟进责任领导：">
                    <el-select v-model="trafficDanger.followLeader" onselect="true">
                      <el-option v-for="item in role" :key="item.cNickname" :label="item.cNickname" :value="item.cNickname">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <span></span>
                  <el-form-item label="责任单位：">
                    <el-input v-model="trafficDanger.dutyUnit" placeholder="请输入单位名" />
                  </el-form-item>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button v-if="title==='添加交通隐患排查表'" @click="dialogFormVisible = false">取 消</el-button>
                <el-button v-else @click="dialogFormVisible = false">关闭</el-button>
                <el-button v-if="title==='添加交通隐患排查表'" type="primary" @click="createData">确定</el-button>
              </div>
            </el-dialog>
            <el-dialog title="查看详情" :visible.sync="dialogabcVisible">
              <el-form ref="form" :model="processInfo" class="demo-ruleForm" style="margin-left:20px;" label-width="150px;">
                <el-row>
                  <span style="margin-left:8.6%;"></span>
                  <el-form-item label="道路类别：">
                    <el-input v-model="processInfo.type" disabled />
                  </el-form-item>
                </el-row>
                <el-row class="firstform">
                  <el-form-item label="地点：">
                    <el-input v-model="processInfo.location" disabled />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="路段情况和事故状况：">
                    <el-input v-model="processInfo.section" disabled />
                  </el-form-item>
                </el-row>
                <el-row class="firstform">
                  <el-form-item label="线型：">
                    <el-input v-model="processInfo.linears" disabled />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span class="list-left"></span>
                  <el-form-item label="路名和公里桩：">
                    <el-input v-model="processInfo.roadName" disabled />
                  </el-form-item>
                </el-row>
                <el-row class="list-left">
                  <el-form-item label="跟进责任民警：">
                    <el-input v-model="processInfo.roadName" disabled />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span class="list-left"></span>
                  <el-form-item label="跟进责任领导：">
                    <el-input v-model="processInfo.followPolice" disabled />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span style="margin-left:8.8%;"></span>
                  <el-form-item label="责任单位：">
                    <el-input v-model="processInfo.dutyUnit" disabled />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span style="margin-left:8.8%;"></span>
                  <el-form-item label="是否销账：">
                    <el-input v-model="processInfo.status" disabled />
                  </el-form-item>
                </el-row>
                <el-row>
                  <span style="margin-left:8.8%;"></span>
                  <el-form-item label="销账理由：">
                    <el-input v-model="processInfo.offReason" disabled />
                  </el-form-item>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="dialogabcVisible = false">关闭</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="tableData" border stripe style="text-align:center;" :header-cell-style="getRowClass" @selection-change="handleSelectionChange" tooltip-effect="dark" id="out-table">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="index" label="编号" width="90" align="center"> </el-table-column>
        <el-table-column prop="district" label="管辖地区行政区划" align="center"></el-table-column>
        <el-table-column prop="location" label="地点" align="center"></el-table-column>
        <el-table-column prop="roadName" label="路名和公里桩" align="center"></el-table-column>
        <el-table-column prop="type" label="道路类别" align="center"></el-table-column>
        <el-table-column prop="linears" label="线型" align="center"></el-table-column>
        <!-- <el-table-column prop="mainDanger" label="主要隐患" align="center"></el-table-column> -->
        <el-table-column prop="dangerGrade" label="隐患等级" align="center"></el-table-column>
        <el-table-column prop="section" label="路段情况和事故状况" align="center"></el-table-column>
        <!-- <el-table-column prop="rectificationProposals" label="整治建议" align="center"></el-table-column> -->
        <!-- <el-table-column prop="dutyUnit" label="责任单位" align="center"></el-table-column> -->
        <!-- <el-table-column prop="followPolice" label="跟进责任民警" align="center"></el-table-column> -->
        <!-- <el-table-column prop="followLeader" label="跟进责任领导" align="center"></el-table-column> -->
        <!-- <el-table-column prop="status" label="是否销账" align="center"></el-table-column> -->
        <!-- <el-table-column prop="offReason" label="销账理由" align="center"></el-table-column> -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="handedit(scope.$index, scope.row)" >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next" :total="total" style="float:right">
        </el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
import { exportExcel, haveKeyObj } from "@/utils/validate";
import { lazyAMapApiLoaderInstance } from "vue-amap";
import { api } from "@/fetch/api";

export default {
  name: "processInfo",
  data() {
    return {
      cUserId: "",
      value1: [],
      value2: [],
      options: [
        {
          value: 0,
          label: "安源区"
        },
        {
          value: 1,
          label: "莲花县"
        },
        {
          value: 2,
          label: "莲花县"
        },
        {
          value: 3,
          label: "上栗县"
        },
        {
          value: 4,
          label: "湘东区"
        }
      ],
      search: {
        district: "",
        type: "",
        status: 1,
        state: 1
      },
      id: "",
      trafficDanger: {},
      role: {},
      searchs: {
        cEmail: "",
        cGroup: "",
        cJobnumber: "",
        cNickname: "",
        cOperatorId: 0,
        cOperatorUser: "",
        cPassword: "",
        cPhone: "",
        cUserId: 0,
        cUsername: "",
        createTime: "",
        endDate: "",
        limit: 0,
        offset: 0,
        remark: ""
      },
      processInfo: {
        id: "",
        list: []
      },
      trafficId: "",
      startDate: "",
      endDate: "",
      title: "",
      total: null,
      threeCheckId: "",
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogabcVisible: false,
      keyprocessVisble: false,
      currentPage: 1, //當前頁碼
      limit: 10,

      downloadLoading: false
    };
  },
  methods: {
    // 导出
    exportTable() {
      if (this.selection === undefined) {
        this.$message.error("请先选择");
      } else {
        let trafficId = "";
        // 判断是否有选中某行或者某些行
        if (!this.selection.length) {
          trafficId = "";
        } else if (this.selection.length == 1) {
          trafficId = this.selection[0].trafficId;
        } else {
          this.selection.forEach(e => {
            trafficId += `,${e.trafficId}`;
          });
          trafficId = trafficId.substr(1);
        }
        // 有查询条件时为true 否则false
        let fullSelected = "";
        let query = "";
        if (!haveKeyObj(this.search)) {
          fullSelected = false;
          query = {};
        } else {
          fullSelected = true;
          query = this.search;
        }
        let url = `/TrafficDanger/exportExcel?id=${trafficId}`;
        api
          .exportData(url, fullSelected, query)
          .then(data => {
            exportExcel(data.data, "交通隐患表单");
          })
          .catch(err => { });
      }
    },
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    // 改变表头颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:rgba(242,242,242,1)";
      } else {
        return "";
      }
    },
    // 查询
    getUser(limit, pageIndex) {
      api
        .Trafficpage(this.search, { limit: 10, pageIndex: 1 })
        .then(response => {
          if (response.status === 100) {
            this.tableData = response.result.list;
            this.currentPage = 1;
            this.tableData.forEach(function (item, index) {
              item.index = index + 1;
            });
            this.total = response.result.total;
          } else {
            this.$message.error(response.message);
          }
        });
    },
    handleCreate() {
      this.trafficDanger = {};
      this.dialogFormVisible = !this.dialogFormVisible;
      this.title = "添加交通隐患排查表";
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    handedit(index, row) {
      this.title = "查看";
      this.processInfo = row;
      this.dialogabcVisible = !this.dialogabcVisible;
    },
    createData() {
      if (!this.trafficDanger.district) {
        this.$message.error("辖区不能为空！！！");
      } else if (!this.trafficDanger.type) {
        this.$message.error("道路类别不能为空！！！");
      } else if (!this.trafficDanger.location) {
        this.$message.error("地点不能为空！！！");
      } else if (!this.trafficDanger.roadName) {
        this.$message.error("路名和公里桩不能为空！！！");
      } else if (!this.trafficDanger.linears) {
        this.$message.error("线型不能为空！！！");
      } else if (!this.trafficDanger.section) {
        this.$message.error("路段情况和事故状况不能为空！！！");
      } else {
        api.Traffadd(this.trafficDanger).then(response => {
          if (response.status === 100) {
            this.$message.success("添加成功");
            this.dialogFormVisible = !this.dialogFormVisible;
            this.getUser(10, this.currentPage);
          } else {
            this.$message.error("添加错误");
          }
        });
      }
    },
    query(search) {
      api
        .Trafficpage(this.search, { limit: 10, pageIndex: 1 })
        .then(response => {
          if (response.status === 100) {
            this.tableData = response.result.list;
            this.currentPage = 1;
            this.tableData.forEach(function (item, index) {
              item.index = index + 1;
            });
            this.total = response.result.total;
          } else {
            this.$message.error(response.message);
          }
        });
    },
    getRole(limit, pageIndex) {
      api
        .UserPage(this.searchs, { limit: limit, pageIndex: pageIndex })
        .then(response => {
          if (response.status === 100) {
            this.role = response.result.list;
          } else {
            this.$message.error(response.message);
          }
        });
    },
    generateData() {
      const datas = [];
      for (let i = 0; i < this.role.length; i++) {
        let cNickname = this.role[i].cNickname;
        datas.push({
          key: i,
          label: ` ${cNickname}`
        });
      }
      return datas;
      return {
        datas: generateData(),
        value1: [],
        value2: [],
        value3: []
      };
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  mounted() {
    this.getUser(10, this.currentPage);
    this.query(this.search);
    this.getRole(10, this.currentPage);
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.firstform {
  margin-left: 11.8%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #333;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.pictitle {
  height: 178px;
  line-height: 178px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.list-left {
  margin-left: 5.2%;
}
.app-container {
  background: #f2f2f2;
  .el-header {
    background: #fff;
    padding-top: 15px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .el-main {
    background: #fff;
    margin: 0 auto;
    padding: 0px;
    .contant_head {
      border-left: 3px solid #f7585d;
      background: #f9f9f9;
      height: 40px;
      span {
        line-height: 40px;
        font-size: 20px;
        padding-left: 10px;
        sub {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
<style>
.el-upload {
  border: 1px solid #333;
  border-radius: 5px;
  margin-bottom: 20px;
}
</style>

<style lang="stylus" module="$">
.role_setting_panel {
  background: #f2f2f2;

  :global {
    .el-form--inline .el-form-item {
      margin-right: 0;
    }
  }
}
</style>